<template>
  <div>
    <el-dialog
      title="查看达人"
      width="1500px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      top="50px"
    >
      <div class="dialogBody">
        <div class="lineTitle">
          <div class="line"></div>
          <span>人员信息</span>
        </div>
        <div class="padContent">
          <div>
            <span class="item_lable">姓名：</span>
            {{ detailData.user_name }}
          </div>
          <div>
            <span class="item_lable">手机号：</span>
            {{ detailData.phone }}
          </div>
          <div>
            <span class="item_lable">年龄：</span>
            {{ detailData.user.age }}
          </div>
          <div>
            <span class="item_lable">性别：</span>
            {{ detailData.user.sex == 1 ? "男" : "女" }}
          </div>
          <div>
            <span class="item_lable">身份证号：</span>
            {{ detailData.user.idNo }}
          </div>
          <div>
            <span class="item_lable">身份：</span>
            {{ detailData.user.user_type_text }}
          </div>
          <!-- <div>
            <span class="item_lable">住址：</span>
            xxx
          </div> -->
          <div v-if="detailData?.talent?.length > 0">
            <div style="margin-bottom: 20px">
              <span
                class="skill"
                :class="{ skillActive: curIndex == index }"
                @click="onSkill(item, index)"
                v-for="(item, index) in detailData.talent"
                >{{ item.type_name }}</span
              >
            </div>
            <div style="margin-bottom: 20px">
              <span class="item_lable" style="width: 120px"
                >资质证明或证书：</span
              >
              <el-image
                v-show="curSkill.pics != ''"
                v-for="(item, index) in curSkill.pics.split(',')"
                style="width: 112px; height: 112px"
                :src="item"
                :preview-src-list="[item]"
              >
              </el-image>
              <!-- <img
                class="photo"
                width="112"
                height="112"
                :src="curSkill.pics"
                alt=""
              /> -->
            </div>
            <div style="margin-bottom: 20px">
              <span class="item_lable">认证补充：</span>
              {{ curSkill.remark }}
            </div>
            <div style="margin-bottom: 20px">
              <span class="item_lable">申请时间：</span>
              {{ curSkill.create_time }}
            </div>
            <div style="margin-bottom: 20px">
              <span class="item_lable">审核人：</span>
              {{ curSkill.reviewer }}
            </div>
            <div style="margin-bottom: 20px">
              <span class="item_lable">认证通过时间：</span>
              {{ curSkill.review_date }}
            </div>
          </div>
        </div>
        <div class="tableList">
          <div class="tabsBox">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="`达人活动(${total})`" name="1"></el-tab-pane>
              <el-tab-pane
                :label="`微项目申请(${total2})`"
                name="2"
              ></el-tab-pane>
            </el-tabs>
          </div>
          <div class="tablesCard bgfff">
            <div class="tablesCardTop">
              <div style="display: flex">
                <div class="totalTxt">
                  未审核：{{ talentListCount.review_status_1 }}
                </div>
                <div class="totalTxt">
                  已通过：{{ talentListCount.review_status_2 }}
                </div>
                <div class="totalTxt">
                  未通过：{{ talentListCount.review_status_3 }}
                </div>
              </div>
            </div>
            <el-table
              :key="activeName"
              v-if="activeName == 1"
              :data="tableData"
              border
              size="small"
              height="500"
              style="width: 100%"
            >
              <el-table-column
                prop="update_time"
                label="申请时间"
                align="center"
              />
              <el-table-column prop="name" label="活动标题" align="center" />
              <el-table-column prop="address" label="活动地点" align="center" />
              <el-table-column
                prop="begin_time"
                label="活动时间"
                align="center"
              />
              <el-table-column
                prop="sing_end_time"
                label="报名截止时间"
                align="center"
              />
              <el-table-column
                prop="point_num"
                label="活动积分"
                align="center"
              />
              <el-table-column
                prop="person_num_limit"
                label="活动人数上限"
                align="center"
              />
              <el-table-column
                prop="review_status_text"
                label="审核状态"
                align="center"
              />
            </el-table>
            <el-table
              :key="activeName"
              v-else
              :data="tableData2"
              border
              size="small"
              height="500"
              style="width: 100%"
            >
              <el-table-column
                prop="create_at"
                label="申请时间"
                align="center"
              />
              <el-table-column
                prop="minProject.project_name"
                label="微项目名称"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="minProject.project_content"
                label="项目内容"
                align="center"
              />
              <el-table-column
                prop="minProject.point_num"
                label="积分数量"
                align="center"
              />

              <el-table-column label="审核状态" align="center">
                <template slot-scope="scope">
                  <span> </span>
                  <span v-if="scope.row.minProject.status == 1">未审核</span>
                  <span
                    v-if="
                      scope.row.minProject.status == 2 && scope.row.topart == 4
                    "
                    >未通过</span
                  >
                  <span
                    v-if="
                      scope.row.minProject.status == 2 && scope.row.topart == 3
                    "
                    >已通过</span
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pageBlock" v-if="activeName == 1">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page.sync="form.page"
                :page-size="form.limit"
                @size-change="
                  (e) => {
                    form.limit = e;
                    getList();
                  }
                "
                @current-change="
                  (e) => {
                    form.page = e;
                    getList();
                  }
                "
              >
              </el-pagination>
            </div>
            <div class="pageBlock" v-else>
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2"
                :current-page.sync="form.page"
                :page-size="form.limit"
                @size-change="
                  (e) => {
                    form.limit = e;
                    getList();
                  }
                "
                @current-change="
                  (e) => {
                    form.page = e;
                    getList();
                  }
                "
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { talentDetail, talentActivityList } from "@/api/talent.js";
import { getApplyListById } from "@/api/miniApply.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      activeName: "1",
      form: {
        type: 1,
        activeId: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      total2: 0,
      tableData: [],
      tableData2: [],
      detailData: {},
      curIndex: 0,
      curSkill: {},
      talentListCount: {},
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getDetail();
  },

  methods: {
    getDetail() {
      talentDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.detailData = res.data;
          this.curSkill = res.data.talent[0];
          console.log(this.detailData, "detailData");

          // this.total = res.total;
          this.getList();
          this.getList2();
        }
      });
    },
    getList() {
      talentActivityList({ user_name: this.detailData.user_name }).then(
        (res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.page.count;
            this.talentListCount = res.data;
          }
        }
      );
    },
    getList2() {
      getApplyListById({ uid: this.detailData.user_id }).then((res) => {
        if (res.code == 200) {
          this.tableData2 = res.data.list;
          this.total2 = res.data.count;
          this.talentListCount = res.data;
        }
      });
    },
    onSkill(item, index) {
      this.curIndex = index;
      this.curSkill = item;
    },
    handleClick() {
      this.form.page = 1;
      this.form.limit = 10;
      if (this.activeName == "1") {
        this.getList();
      } else {
        this.getList2();
      }
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .padContent {
    margin-top: 10px;
    padding-left: 10px;
    > div {
      margin-bottom: 20px;
    }
    .item_lable {
      display: inline-block;
      width: 100px;
      text-align: right;
      color: #4f4f4f;
    }
    .skill {
      margin-right: 16px;
      padding: 6px 18px;
      border-radius: 30px 30px 30px 30px;
      border: 1px solid #1890ff;
      font-size: 14px;
      color: #1890ff;
      cursor: pointer;
    }
    .skillActive {
      background: rgba(0, 135, 250, 0.1);
    }
    .photo {
      vertical-align: top;
    }
    .el-image {
      margin-right: 10px;
      vertical-align: top;
    }
  }
  .tableList {
    padding-top: 10px;
    border: 1px solid #e5e5e5;
    .el-tabs {
      height: 20px;
    }
    .tabsBox {
      margin: 0 24px;
    }
    .tablesCard {
      .totalTxt {
        margin-right: 20px !important;
      }
    }
  }
}
</style>
